<template>
  <div class="container">
    <div>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item
            label="区域"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="投诉人" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="办理状态" class="row-padding-bottom">
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in handleStateOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用人单位" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="收件日期" class="row-padding-bottom">
            <timeSelection
              @getStartTimeValue="getStartTimeValue"
              @getEndTimeValue="getEndTimeValue"
            ></timeSelection>
          </el-form-item>
          <el-form-item label="办结日期" class="row-padding-bottom">
            <timeSelection
              @getStartTimeValue="getStartTimeValue"
              @getEndTimeValue="getEndTimeValue"
            ></timeSelection>
          </el-form-item>
          <el-form-item
            label="是否延期"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isDelayOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="重复号码"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isRepeat"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="重复诉求"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in isRepeat"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号" class="row-padding-bottom">
            <el-input
              v-model="filterField.account"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
          <el-form-item class="fr" v-show="loginQy || isCzUser()">
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="toAdd"
              v-hasBtn="'accountList:add'"
            >
              <span class="opetareText">添加专户</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="tableList">
        <el-row class="table-header">
          <el-col :span="12" style="text-align: left">
            <span>查询表格</span>
          </el-col>
          <el-col :span="12" class="table-btn">
            <el-button
              class="commonBut saveBtn funComBut bzjAddJc"
              icon="icon iconfont icondaochu"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="projectName"
            label="编号"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="专线收件时间"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="号码标记"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="诉求标记"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="区县"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="街道"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="欠薪诉求"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="投诉人"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="联系电话"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="用人单位"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="最近办理进展"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="截止完成时间"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="是否延期"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="渠道来源"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="办理责任人"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="办理状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" :formatter="formatTd">
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.$index, scope.row)"
                >编辑</el-link
              >
              <span>
                <el-link
                  type="primary"
                  v-if="isShowUpdate"
                  @click="toEdit(scope.$index, scope.row)"
                  >删除</el-link
                >
              </span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'specialAccountListList',
  data() {
    return {
      upLoadType: 'upLoadAgreementFile',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      //表格数据
      tableList: [],
      tableLsList: [],
      requestUrl: 'api-acc/account/expand/accountpage',
      requestLsUrl: 'api-acc/accass/expand/list',
      date: [],
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        account: '', //专户账号
        areaId: '', //区域
        industryId: '', //行业
        bankId: '',
        beginDate: '',
        endDate: '',
      },
      pageSize: 20,
      pageNo: 1,
      lsfilterField: {
        createDate: '',
        projectId: '',
        account: '',
      },
      isShow: false, //列表加载
      isLsShow: false, //列表加载
      loading: true,
      lsLoading: true,
      dialogVisible: false,
      specialAccount: '', //专户账号
      projectId: '',
      isDisplay: true, //是否隐藏
      userType: '', //用户类型
      areaId: '', //区域
      bankOptions: [],
      bankBranchOptions: [], //网点列表
      loginQy: '', //当前登录用户是否是企业
      accountFormVisible: false,
      // 补充专户信息
      accountForm: {
        projectId: '',
        accountId: '',
        bankId: '',
        bankSiteId: '', //银行网点id
        account: '',
        srcList: [],
        oldSrcList: [],
        upLoadAgreementFile: [], //三方协议
        agrSrcList: [],
        oldAgrSrcList: [],
        upLoadFileAcc: [],
      },
      // bankData: [],
      eventType: '',
      formRules: {
        projectId: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'change',
          },
        ],
        bankId: [
          {
            required: true,
            message: '银行不能为空',
            trigger: 'change',
          },
        ],
        bankSiteId: [
          {
            required: true,
            message: '银行网点不能为空',
            trigger: 'change',
          },
        ],
        account: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      handleStateOptions: [
        {
          code: '选项2',
          name: '办理中',
        },
        {
          code: '选项1',
          name: '待进一步办理',
        },
        {
          code: '选项3',
          name: '已办结',
        },
      ],
      isDelayOptions: [
        {
          code: '选项2',
          name: '是',
        },
        {
          code: '选项3',
          name: '否',
        },
      ],
      isRepeat: [
        {
          code: '选项2',
          name: '重复',
        },
        {
          code: '选项3',
          name: '非重复',
        },
      ],
      canLogin: false, //专户保存按钮loading
      projectListOptions: [],
      tipsInfo: '', //提示语
      isShowUpdate: '',
      projectOptions: [], //项目名称下拉框 滁州监察
      total: 0,
      pageSizeNumber: 20,
      pageNo: 1,
      projectSelect: '',
      item: '',
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },

  created() {
    this.$store.state.activeMenu = '/home/specialAccount/specialAccountList'
    this.getBank()
    this.userType = localStorage.getItem('loginType')
    //建筑端企业端项目详情-专户管理跳转专户列表
    this.filterField.projectName = this.$route.query.projectName
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    // 企业用户不显示区域和行业

    if (
      localStorage.getItem('loginType') === 'QY' ||
      localStorage.getItem('loginType') === 'XM'
    ) {
      this.loginQy = true
    } else {
      //获取区域
      this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
      //获取行业
      this.getIndustry({})
    }

    // this.getProjectList(this.pageNo, this.pageSizeNumber);

    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('accountList:update') > -1
  },
  activated() {
    console.log(this.pageSize, this.pageNo)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    addDeclare() {
      this.$router.push('/home/unpaidComplaint/newBackPayDemands')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.beginDate = val
      } else {
        this.filterField.beginDate = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDate = val
      } else {
        this.filterField.endDate = ''
      }
    },
    downloadTemplate() {
      this.axios
        .post('api-f/files/downLoadTripartiteAgreement')
        .then((res) => {
          if (!res.data.hasError) {
            window.open(res.data.result.url)
          } else {
            this.$message({
              message: '获取协议地址失败',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '获取协议地址失败',
            type: 'error',
          })
        })
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    ...mapActions(['getAreas', 'getIndustry']),
    changeSrcList(val) {
      this.accountForm.srcList = val
    },
    changeSrcListAgreement(val) {
      this.accountForm.agrSrcList = val
    },
    /**
     * @name: 监听银行的Id
     * @param {type}
     * @Author: 471826078@qq.com
     */
    changeBankId(val) {
      this.accountForm.bankSiteId = ''
      if (!val) {
        this.bankBranchOptions = []
      } else {
        this.getBankBranchList(val)
      }
    },
    /**
     * @name: 获取银行网点列表
     * @param {String}  bankId
     * @Author: 471826078@qq.com
     */
    getBankBranchList(bankId) {
      this.axios
        .post('api-acc/accountbank/expand/banksite', { bankId })
        .then((res) => {
          this.bankBranchOptions = res.data.result
          if (res.data.result.length === 0) {
            this.$message({
              message: '请联系银行管理员进行网点信息维护',
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getTableLsList(data) {
      this.tableLsList = data
      this.lsLoading = false
      if (this.tableLsList.length < 1) {
        this.isLsShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    searchLsList() {
      this.$refs.paginationLs.getTableListData()
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    toDetail(index, row) {
      if (this.userType == 'QY' || this.userType == 'XM') {
        this.$router.push({
          path: '/home/specialAccount/companyAccountDetail',
          name: 'companyAccountDetail',
          query: {
            projectId: row.projectId,
            path: 'specialAccountList',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/specialAccount/specialAccountList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.specialAccount = row.account
        this.projectId = row.projectId
        this.lsfilterField.projectId = row.projectId
        this.lsfilterField.account = row.account
        this.lsfilterField.createDate = row.createTime
        this.isDisplay = true
        this.dialogVisible = true
        if (this.isYcUser() && row.balance * 1 < 0) {
          this.tipsInfo = '流水数据不完整，请联系施工企业登录系统及时分配流水。'
        } else {
          this.tipsInfo = ''
        }
        this.$nextTick(function () {
          this.$refs.paginationLs.getTableListData()
        })
      }
    },
    doDisplay() {
      this.isDisplay = !this.isDisplay
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == '0') {
        let lately2 = (daterc / 10000).toFixed(3) //对小数点后3位四舍五入
        return lately2.substring(0, lately2.lastIndexOf('.') + 3)
      } else {
        return '--'
      }
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getProjectList(pageNo, pageSizeNumber, val, projectId) {
      var urlAdress, Data
      if (this.isCzUser() && this.$store.state.userType == 'MONITOR') {
        urlAdress = 'api-p/projectstats/expand/list'
        if (this.eventType == 'update') {
          Data = {
            pageNo: 1,
            pageSize: 20,
            projectId: projectId,
            projectName: val,
            isSa: '',
          }
        } else {
          Data = {
            pageNo: pageNo,
            pageSize: pageSizeNumber,
            projectName: val,
            isSa: 0,
          }
        }
      } else {
        urlAdress = 'api-p/projectcompany/expand/current/projects'
        Data = {}
      }
      this.axios({
        method: 'post',
        url: urlAdress,
        data: Data,
      })
        .then((response) => {
          if (this.isCzUser() && this.$store.state.userType == 'MONITOR') {
            this.projectOptions = response.data.result.results
            this.total = response.data.result.total
          } else {
            this.projectListOptions = response.data.result
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    // 添加专户
    toAdd() {
      this.eventType = 'add'
      this.getProjectList(this.pageNo, this.pageSizeNumber)
      this.accountFormVisible = true
    },
    //专户弹框取消
    cancelAccountDialog() {
      this.accountFormVisible = false
      this.accountForm.srcList = []
      this.accountForm.oldSrcList = []
      this.accountForm.upLoadFileAcc = []
      this.accountForm.upLoadAgreementFile = []
      this.accountForm.agrSrcList = []
      this.accountForm.oldAgrSrcList = []
      this.accountForm.projectId = ''
      this.$refs.accountForm.resetFields()
      // this.$nextTick(function(){
      //   this.accountFormVisible = false;
      //   this.$refs.accountForm.resetFields();
      // });
    },
    //修改专户
    toEdit(index, row) {
      this.eventType = 'update'
      this.accountFormVisible = true
      if (this.isCzUser() && this.$store.state.userType == 'MONITOR') {
        this.getProjectList(
          this.pageNo,
          this.pageSizeNumber,
          row.projectName,
          row.projectId
        )
      } else {
        this.getProjectList(this.pageNo, this.pageSizeNumber)
      }
      this.$nextTick(function () {
        this.getUpdateAccountInfo(row.projectId)
      })
    },
    //保存专户信息
    saveBankInfo() {
      //确定按钮禁止点击
      this.canLogin = true
      var projectId
      if (this.isCzUser() && this.$store.state.userType == 'MONITOR') {
        projectId = this.projectId
      } else {
        projectId = this.accountForm.projectId
      }
      this.$refs['accountForm'].validate((valid) => {
        var url = ''
        if (valid) {
          if (this.eventType === 'add') {
            url = 'api-acc/account/expand/add'
          } else {
            url = 'api-acc/account/expand/update'
          }
          let data = {
            projectId: projectId,
            id: this.accountForm.accountId,
            account: this.accountForm.account,
            bankSiteId: this.accountForm.bankSiteId, //新增银行网点地段
            bankId: this.accountForm.bankId,
            openCertificateFile: JSON.stringify(this.accountForm.upLoadFileAcc),
            agreementFile: JSON.stringify(this.accountForm.upLoadAgreementFile),
          }
          this.saveAccountAjax(url, data)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //保存专户的ajax
    saveAccountAjax(url, data) {
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (res) => {
            this.canLogin = false
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.accountFormVisible = false //关闭弹窗
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canLogin = false
            this.$message({
              message: '保存失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.canLogin = false
          this.$message({
            message: '保存失败',
            type: 'error',
          })
        })
    },
    //获取修改专户的信息
    getUpdateAccountInfo(projectId) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.accountForm.projectId = projectId
              this.accountForm.bankId = parseInt(res.data.result.bankId) + ''
              this.getBankBranchList(this.accountForm.bankId)
              this.accountForm.accountId = res.data.result.id
              this.accountForm.account = res.data.result.account
              this.accountForm.bankSiteId = res.data.result.bankSiteId
                ? res.data.result.bankSiteId == 0
                  ? ''
                  : res.data.result.bankSiteId
                : ''
              if (res.data.result.openCertificateFiles.length > 0) {
                this.accountForm.upLoadFileAcc =
                  res.data.result.openCertificateFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadFileAcc.length;
                  i++
                ) {
                  this.accountForm.srcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                  this.accountForm.oldSrcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                }
              }
              if (res.data.result.agreementFiles.length > 0) {
                this.accountForm.upLoadAgreementFile =
                  res.data.result.agreementFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadAgreementFile.length;
                  i++
                ) {
                  this.accountForm.agrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                  this.accountForm.oldAgrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                }
              }
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: '获取专户信息失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    getFileList(val) {
      this.accountForm.oldSrcList.push(val)
      this.accountForm.srcList.push(val)
    },
    getFile(val) {
      this.accountForm.upLoadFileAcc = val
    },
    getFileListAgr(val) {
      this.accountForm.oldAgrSrcList.push(val)
      this.accountForm.agrSrcList.push(val)
    },
    getFileAgr(val) {
      this.accountForm.upLoadAgreementFile = val
    },
    // 添加专户项目名称分页
    ChangeSearch() {
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.projectSearch.blur()
      })
      var item = this.projectOptions[this.accountForm.projectId]
      if (item) {
        this.projectId =
          this.projectOptions[this.accountForm.projectId].projectId
      }
    },
    visibleChangeProject(val) {
      if (!this.accountForm.projectId && this.accountForm.projectId !== 0) {
        if (val) {
          this.pageNo = 1
          this.projectSelect = ''
          this.accountForm.projectId = ''
          this.getProjectList(
            this.pageNo,
            this.pageSizeNumber,
            this.projectSelect
          )
        }
      } else {
        //手动输入再次打开弹框清空输入值
        // 获取的企业数据索引
        // 选中的企业的具体数据
        if (typeof this.accountForm.projectId === 'string') {
          this.accountForm.projectId = ''
        } else {
        }
      }
    },
    selectChange(val) {
      //手动输入掉接口会清空问题下拉框的值，掉完接口再赋值
      this.projectSelect = val
      this.getProjectList(1, this.pageSizeNumber, val)
      if (typeof this.accountForm.projectId === 'string') {
        this.accountForm.projectId = val
      }
      this.accountForm.projectId = val
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.accountForm.projectId = ''
      this.getProjectList(val, this.pageSizeNumber, this.projectSelect)
    },
  },
}
</script>

<style scoped lang="less">
.download {
  position: absolute;
  right: 30px;
  top: 0;
}
.mainCon {
  top: 198px;
}

// 修改专户弹窗样式
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 40px;
    color: #009588;
    border: 1px solid #009588;
    cursor: pointer;
  }
  .upLoadDom {
    position: absolute;
    width: 96px;
    height: 40px;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 0px;
    form {
      input {
        width: 96px;
        height: 40px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}

.agreementBox {
  /deep/label {
    line-height: 20px;
  }
}
.imgStyle {
  margin-left: 135px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}
.optionWidth,
.inputWidth {
  width: 310px !important;
}
.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 58px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 30px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
}
.addAccount {
  padding-top: 24px;
}
.el-dialog__footer {
  height: 66px;
  padding: 15px 20px;
}
.el-dialog__footer button {
  height: 36px !important;
}
.tableList {
  border-top: 10px solid #f5f7fa;
  padding: 20px 24px;
}
.table-header {
  width: 100%;
  font-size: 16px;
  color: #333333;
  padding: 20px 0px;
}
.table-btn {
  widows: 100%;
  height: 100%;
  text-align: right;
}
</style>
